<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    .box{
        width: 100%;
        position: relative;
    }
    header{
        height: 50px;
        font-size: 35px;
        line-height: 50px;
        width: 100%;
       
        font-weight: 100;
        color: grey;
        background:rgb(248, 248, 248);
    }
    header p{
         padding-left: 30px;
    }
    form{
            width: 90%;
            margin: 0 auto;
    }
    form p{

        font-weight: 900;
        margin-top: 20px;
        margin-bottom: 10px;
    }
    form input{
        width: 100%;
        height: 30px;
        display: block;
        /* margin: 0 auto; */
        border-radius: 5px;
        outline: none;
        border: 1px solid #ccc;
    }
    form input[type=button]{
        width: 50px;
        background: #fff;
        float: left;
    }
    form input[type="text"]::-webkit-input-placeholder{
        padding-left: 10px;
    }
    form input[type="tel"]::-webkit-input-placeholder{
        padding-left: 10px;
    }
    form input[type="email"]::-webkit-input-placeholder{
        padding-left: 10px;
    }


    table{
        clear: both;
        width: 90%;
        margin: 0 auto;
        margin-top: 80px;
        border: 1px solid rgb(233, 230, 230);

    }
    table tr{
        height: 50px;
    }
    table tr td{
        border: 1px solid rgb(233, 230, 230);
        padding-left: 10px;

    }
    table .btnDelete{
        width: 80px;
        height: 30px;
        margin-right:10px;
        background: red;
        border: none;
        border-radius: 5px;
        color: #fff;

    }
    table .btnEdit{
        width: 80px;
        height: 30px;
        margin-right:10px;
        background: red;
        border: none;
        border-radius: 5px;
        color: #fff;
    }
    

    .edit{
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;
        background: rgba(0, 0, 0, 0.8)
    }
    .edit form input{
        margin-top: 20px;
    }
    .edit form input[type=submit]{
        width: 50px;
        background: #fff;
        margin: 0 auto;
        margin-top: 20px;

    }
    .edit p{
        margin-top: 30px;
        color: #fff;
    }
</style>
<body>
    <div class="box">
        <header>
           <p>通讯录</p> 
        </header>
        <form action="">
            <p>姓名</p>
            <input type="text" class="name" placeholder="请输入姓名"><br>
            <p>电话</p>
            <input type="tel" class="tel" placeholder="请输入电话号码"><br>
            <p>邮箱</p>
            <input type="email" class="email" placeholder="请输入邮箱地址" name="email"><br>
            <input type="button" value="保存" class="save">
        </form>

        <table border="1" cellspacing="0">
            <thead>
                <tr>
                    <td>姓名</td>
                    <td>电话</td>
                    <td>邮箱</td>
                    <td>操作</td>
                </tr>
            </thead>
           
            <tbody>

            </tbody>
        </table>

        <div class="edit">
            <form>
                <p>姓名</p>
                <input type="text" class="editName">
                <p>电话</p>
                <input type="text" class="editTel">
                <p>邮箱</p>
                <input type="text" class="editEmail">
                <input type="submit" class="editSave" value="修改">
                <input type="submit" class="editClose" value="关闭">
             </form>
                  
        </div>
    </div>
</body>
<script src="jquery-2.2.0.min.js"></script>
<script>
    $(function(){
        $('.save').on('click',function(e){
            e.preventDefault();
            var obj = {
                name:$('.name').val(),
                tel:$('.tel').val(),
                email:$('.email').val()
            }

            var all = localStorage.getItem('list');
            console.log(all);
            if(all){
                all = JSON.parse(all);
                all.push(obj);
                localStorage.setItem('list',JSON.stringify(all));
            }
            else{
                localStorage.setItem('list',JSON.stringify([obj]));
            }
            
            var str = '<tr>'+
            '<td>' + obj.name + '</td>'+
            '<td>' + obj.tel + '</td>'+
            '<td>' + obj.email + '</td>'+
            '<td>' + 
            '<button class="btnDelete">删除</button>'+
            '<button class="btnEdit">修改</button>'
             + '</td>'
            +'</tr>'

            $('table tbody').append(str);
        })

        getAll()
        function getAll(){
            var all=localStorage.getItem('list');
            all = JSON.parse(all);
            for(var i=0;i<all.length;i++){
                var str = '<tr>'+
                '<td>' + all[i].name + '</td>'+
                '<td>' + all[i].tel + '</td>'+
                '<td>' + all[i].email + '</td>'+
                '<td>' + 
                '<button class="btnDelete">删除</button>'+
                '<button class="btnEdit">修改</button>'
                + '</td>'
                +'</tr>'

                $('table tbody').append(str);
            }
        }




        $('table').on('click','.btnDelete',function(){
            var tr = $(this).parent().parent();
            var all = localStorage.getItem('list');
            all = JSON.parse(all);
            all.splice(tr.index(),1);
            localStorage.setItem('list',JSON.stringify(all));
            tr.remove();
        }).on('click','.btnEdit',function(){
            $('.edit').css({'display':'block',})
        

        var all = localStorage.getItem('list');
        all = JSON.parse(all);
        var tr = $(this).parent().parent();
        $('.editName').val(all[tr.index()].name);
        $('.editTel').val(all[tr.index()].tel);
        $('.editEmail').val(all[tr.index()].email);


        var obj1 = {
            name:all[tr.index()].name,
            tel:all[tr.index()].tel,
            email:all[tr.index()].email,
        }

        obj1.index = tr.index();
        sessionStorage.setItem('listEdit',JSON.stringify(obj1));
        })


        $('.editSave').on('click',function(e){
            e.preventDefault();
            var obj1 = sessionStorage.getItem('listEdit');
            obj1 = JSON.parse(obj1);
            var all = localStorage.getItem('list');
            all = JSON.parse(all);

            var obj2 = {
                name:$('.editName').val(),
                tel:$('.editTel').val(),
                email:$('.editEmail').val()
            }

            all.splice(obj1.index,1,obj2);
            localStorage.setItem('list',JSON.stringify(all));
            $('table tbody tr').remove();
            getAll();
        })

        $('.editClose').on('click',function(){
            $('.edit').css({'display':'none'})
        })

    })
</script>
</html>